<template>
  <v-form v-model="valid" @submit.prevent="save">
    <v-container>
      <v-row>
        <v-col cols="12" md="4">
          <v-text-field
            v-model="account"
            :rules="accountRules"
            :counter="accountMaxLength"
            label="账号"
            required
          ></v-text-field>
        </v-col>
        <v-col cols="12" md="4">
          <v-text-field
            v-model="userName"
            :rules="userNameRules"
            label="名字"
            :counter="userNameMaxLength"
            required
          ></v-text-field>
        </v-col>
        <v-col cols="12" md="4">
          <v-text-field
            label="密码"
            :append-inner-icon="passwordShow ? 'fa-solid fa-eye-slash' : 'fa-regular fa-eye'"
            :type="passwordShow ? 'text' : 'password'"
            prepend-inner-icon="mdi-lock-outline"
            :counter="passwordMaxLength"
            v-model="password"
            :rules="passwordRules"
            @click:append-inner="passwordShow = !passwordShow"
          ></v-text-field>
        </v-col>
      </v-row>
      <v-divider></v-divider>
      <v-row>
        <v-col cols="12" md="4">
          <v-radio-group v-model="sexCode" :inline="true">
            <v-radio label="男" value="1"></v-radio>
            <v-radio label="女" value="2"></v-radio>
          </v-radio-group>
        </v-col>
        <v-col cols="12" md="4" v-click-outside="closeBirthdaySelection">
          <v-text-field
            v-model="birthdayCompute"
            :readonly="true"
            clearable
            @update:focused="birthdaySelection = true"
            placeholder="出生日期"
          ></v-text-field>
          <v-date-picker
            v-show="birthdaySelection"
            @update:modelValue="birthdayChange"
            position="absolute"
            color="primary"
            elevation="24"
          ></v-date-picker>
        </v-col>
      </v-row>
      <v-divider></v-divider>
      <v-row>
        <v-col cols="36">
          <v-btn :loading="loading" type="submit" class="mt-2" text="Submit"></v-btn>
        </v-col>
      </v-row>
      <v-divider style="margin-bottom: 20px"></v-divider>
      <v-row>
        <v-col cols="36">
          <v-container>
            <v-row>
              <v-col>
                <h3>新增数据</h3>
                <p>POST /user-modify/save</p>
              </v-col>
            </v-row>
            <v-row>
              <v-col>
                <p>1. save</p>
                <p>2. 关联对象自动save</p>
                <p>3. 一对一又向关联的写法</p>
                <p>4. 关联对象Lazy因为数据库字段是否独立带来的懒加载影响</p>
              </v-col>
            </v-row>
            <v-row>
              涉及的类与方法：
            </v-row>
            <v-row>
              <v-col>
                <pre>com.zoro.dyformservice.business.user.entity.UserInfoEntity</pre>
                <pre>com.zoro.dyformservice.business.user.entity.UserInfoExtEntity</pre>
                <pre>com.zoro.dyformservice.business.user.service.UserInfoModifyService.handleInsert(UserInfoEntity)</pre>
                <pre>com.zoro.dyformservice.business.user.repository.UserRepository#save(UserInfoEntity)</pre>
              </v-col>
            </v-row>
          </v-container>
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="36">
          <v-container>
            <v-row>
              <v-col><h3>新增数据</h3>
                <p>POST /user-modify/save</p></v-col>
            </v-row>
            <v-row>
              <v-col>
                TODO 使用 save 方法会全字段更新， 需要写jpql
              </v-col>

            </v-row>
          </v-container>

        </v-col>
      </v-row>

    </v-container>
  </v-form>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
import { maxLength, required } from '@/utils/validator-generator'
import { post } from '@/api/http-service'
import { success } from '@/components/messages/message-service'
import dayjs from 'dayjs'
import { Format, format } from '@/utils/date-time'

const accountMaxLength = 100
const userNameMaxLength = 36
const passwordMaxLength = 36
const valid = ref<boolean>()
const account = ref<string>()
const password = ref<string>()
const userName = ref<string>()
const passwordShow = ref(false)
const birthday = ref<Date | null>(new Date())
const birthdayCompute = computed({
  get() {
    if (!birthday.value) {
      return ''
    }
    return dayjs(birthday.value).format('YYYY-MM-DD')
  },
  set(newValue: string) {
    const v = dayjs(newValue)
    if (v.isValid()) {
      birthday.value = dayjs(newValue).toDate()
    } else {
      birthday.value = null
    }
    console.log(birthday.value)
  }
})
const birthdaySelection = ref(false)
const sexCode = ref('1')
const accountRules = [required('account'), maxLength('account', accountMaxLength)]
const userNameRules = [required('user name'), maxLength('user name', userNameMaxLength)]

const passwordRules = [
  required('password'),
  maxLength('password', passwordMaxLength),
  (value: string) => {
    if (value.length < 4) {
      return "password length can't less than 4."
    }
    return true
  }
]

const loading = ref(false)
const save = () => {
  if (!valid.value) {
    return
  }
  loading.value = true
  const birth = dayjs(birthday.value)
  return post({
    url: '/user-modify/save',
    data: {
      account: account.value,
      userName: userName.value,
      password: password.value,
      userInfoExt: {
        sexCode: sexCode.value,
        birthday: format(birthday.value, Format.YYYY_MM_DD_HH_MM_SS)
      }
    }
  })
    .then((value) => {
      console.log(value)
      success('保存成功')
    })
    .finally(() => {
      loading.value = false
    })
}

const birthdayChange = (value: unknown) => {
  birthday.value = value as Date
}

const closeBirthdaySelection = () => {
  if (!birthdaySelection.value) {
    return
  }
  setTimeout(() => {
    birthdaySelection.value = false
  }, 1)
}
</script>
<style scoped lang="sass"></style>
